<template id='OperationMonkey'>
  <div class="OperationMonkey">
    <div class="operation">
      <div class="tab">
        <span
          v-for="(item, index) in tabList"
          :key="index"
          @click="isClick = item.id"
          :class="{ isChose: isClick == item.id }"
          >{{ item.name }}
          <div :class="{ isClick: isClick == item.id }"></div>
        </span>
      </div>
    </div>
    <div class="btns">
      <div class="tab">
        <span
          v-for="(item, index) in tabList"
          :key="index"
          @click="isClick = item.id"
          :class="{ isChose: isClick == item.id }"
          >{{ item.name }}
          <div :class="{ isClick: isClick == item.id }"></div>
        </span>
      </div>
    </div>
    <div class="main">
      <div class="leftPath">
        <div class="backBtn" @click="back">
          <div class="backBg"></div>
          <span>返回</span>
        </div>
        <div class="monkey">
          <div class="picture">
            <div class="monkeyBorder"></div>
            <div class="monkeyBg"></div>
            <div class="monkeyItem"></div>
          </div>
          <div class="phone">
            <ul class="phoneDesc">
              <li>
                <span class="title">猩猩ID</span
                ><span class="value">{{ monkeyInfo.id }}</span>
              </li>
              <li>
                <span class="title">种族</span
                ><span class="value">{{ monkeyInfo.race }}</span>
              </li>
              <li>
                <span class="title">周期</span
                ><span class="value">{{ monkeyInfo.cycle }}</span>
              </li>
            </ul>
            <div class="upMonkey">
              <div class="leftPath">
                <p class="name">消耗资源</p>
                <div class="coins">
                  <div class="coinsBg"></div>
                  <p>{{ monkeyInfo.coins }}</p>
                </div>
                <div class="diamonds">
                  <div class="diamondsBg"></div>
                  <p>{{ monkeyInfo.diamonds }}</p>
                </div>
              </div>
              <div class="rightPath">
                <div @click="showCommonDialog" class="btn">
                  <span> {{ typeName }}</span>
                </div>
                <p class="probability">
                  爆卡率<span>{{ monkeyInfo.probability }}</span>
                </p>
              </div>
            </div>
          </div>
          <ul class="desc">
            <li>
              <span class="title">猩猩ID</span
              ><span class="value">{{ monkeyInfo.id }}</span>
            </li>
            <li>
              <span class="title">种族</span
              ><span class="value">{{ monkeyInfo.race }}</span>
            </li>
            <li>
              <span class="title">周期</span
              ><span class="value">{{ monkeyInfo.cycle }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="rightPath">
        <div class="feed">
          <div class="text">
            <span class="title">喂养次数</span>
            <span>{{ monkeyInfo.hasFeed }}/{{ monkeyInfo.totalFeed }}</span>
          </div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="progressWidth"
            :color="customColor"
          ></el-progress>
        </div>
        <div class="attribute">
          <div
            class="attributeItem"
            v-for="(item, index) in monkeyInfo.attributeList"
            :key="index"
          >
            <div class="text">
              <p>{{ item.name }}</p>
              <span>{{ item.value }}</span>
              <span
                class="new"
                :class="{
                  newAnimation: item.add && isShowNewAnimation,
                }"
                v-if="item.add"
              >
                +{{ item.add }}</span
              >
            </div>
            <el-progress
              :text-inside="true"
              :stroke-width="26"
              :percentage="item.value"
              :color="attributeColorMethod"
            ></el-progress>
          </div>
        </div>
        <div class="desc">
          <p
            class="descItem"
            v-for="(item, index) in monkeyInfo.descList"
            :key="index"
          >
            <span class="name">{{ item.name }}</span>
            <span class="value">{{ item.value }}</span>
            <span class="add" v-if="item.add">+{{ item.add }}</span>
          </p>
        </div>
        <div class="upMonkey">
          <div class="leftPath">
            <p class="name">消耗资源</p>
            <div class="coins">
              <div class="coinsBg"></div>
              <p>{{ monkeyInfo.coins }}</p>
            </div>
            <div class="diamonds">
              <div class="diamondsBg"></div>
              <p>{{ monkeyInfo.diamonds }}</p>
            </div>
          </div>
          <div class="rightPath">
            <div @click="showCommonDialog" class="btn">
              <span> {{ typeName }}</span>
            </div>
            <p class="probability">
              爆卡率<span>{{ monkeyInfo.probability }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <common-dialog
      :dialogInfo="dialogInfo"
      :isShowCommonDialog="isShowCommonDialog"
      :clickColse="clickColse"
      @closeCommonDialog="closeCommonDialog"
      @confirmDialog="confirmDialog"
    ></common-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import CommonDialog from "@/components/CommonDialog.vue";
export default {
  name: "OperationMonkey",
  components: {
    CommonDialog,
  },
  // 定义属性
  data() {
    return {
      isShowNewAnimation: false,
      clickColse: false,
      isShowCommonDialog: false,
      dialogInfo: {
        message1: "您有可能因为进化,有",
        message2: "几率让此卡片永久消失。",
        title: "",
        probability: "100%",
        typeBg: "",
        typeName: "",
      },
      customColor: "#e1b800",
      attributeColor: "#00ff1e",
      tabList: [
        { id: 1, name: "工作" },
        { id: 2, name: "列表" },
      ],
      isClick: 2,
      monkeyInfo: {
        id: "#898298989",
        race: "肌肉建达猩猩",
        cycle: "巅峰期",
        hasFeed: 12,
        totalFeed: 20,
        attributeList: [
          {
            id: 1,
            name: "力量",
            value: 60,
            add: "",
          },
          {
            id: 2,
            name: "智力",
            value: 40,
            add: "",
          },
          {
            id: 3,
            name: "敏捷",
            value: 45,
            add: "",
          },
          {
            id: 4,
            name: "体质",
            value: 45,
            add: "",
          },
          {
            id: 5,
            name: "耐力",
            value: 90,
            add: "",
          },
          {
            id: 6,
            name: "精神",
            value: 100,
            add: "",
          },
        ],
        descList: [
          { id: 1, name: "繁育次", value: "49/50", add: "1" },
          { id: 1, name: "工作收益", value: "250倍", add: "1024" },
          { id: 1, name: "备份功能", value: "99999", add: "9999" },
          { id: 1, name: "备份功能", value: "9999", add: "9999" },
          { id: 1, name: "备份功能", value: "9999", add: "9999" },
          { id: 1, name: "备份功能", value: "9999", add: "9999" },
        ],
        coins: "999999999",
        diamonds: "999999999",
        probability: "100%",
      },
      typeName: "",
      type: "",
      id: "",
      typeBg: "",
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    progressWidth() {
      let temp = 96.32 * (this.monkeyInfo.hasFeed / this.monkeyInfo.totalFeed);
      return temp;
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    attributeColorMethod(percentage) {
      // console.log(percentage, "percentage");
      return "#00ff1e";
    },
    showCommonDialog() {
      if (this.type == 1) {
        this.dialogInfo.message1 = "您确定要喂养改宠物？";
      }
      this.isShowCommonDialog = true;
      this.clickColse = false;
    },
    closeCommonDialog() {
      this.clickColse = true;
      setTimeout(() => {
        this.isShowCommonDialog = false;
      }, 700);
    },
    confirmDialog() {
      this.monkeyInfo.attributeList[1].add = 10;
      setTimeout(() => {
        this.monkeyInfo.attributeList[1].value =
          this.monkeyInfo.attributeList[1].value +
          this.monkeyInfo.attributeList[1].add;
        this.monkeyInfo.hasFeed++;
        this.isShowNewAnimation = true;
      }, 700);
      this.isShowNewAnimation = false;
    },
    getParams() {
      this.type = this.$route.query.status;
      this.id = this.$route.query.id;
      if (this.type == 1) {
        this.typeName = "喂养授权";
        this.dialogInfo.typeName = "喂养授权";
        this.dialogInfo.title = "确认喂养";
      } else {
        this.typeName = "进阶授权";
        this.dialogInfo.typeName = "进阶授权";
        this.dialogInfo.title = "确认进阶";
      }
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    progressValue() {
      let hasFeed = JSON.parse(JSON.stringify(this.monkeyInfo.hasFeed));
      this.monkeyInfo.attributeList.map((item, index) => {
        let temp = JSON.parse(JSON.stringify(item.value));
        item.value = 0;
        let setintervalId = setInterval(() => {
          if (item.value < temp) {
            item.value = item.value + 2;
          } else {
            clearInterval(setintervalId);
          }
        }, 10);
      });
      this.monkeyInfo.hasFeed = 0;
      let setintervalId = setInterval(() => {
        if (this.monkeyInfo.hasFeed < hasFeed) {
          this.monkeyInfo.hasFeed = this.monkeyInfo.hasFeed + 1;
        } else {
          clearInterval(setintervalId);
        }
      }, 20);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.progressValue();
    this.getParams();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.OperationMonkey {
  user-select: none;
  margin-top: 188px;
  position: relative;
  .operation {
    display: flex;
    position: absolute;
    top: -68px;
    z-index: 9;
    .tab {
      background-image: url("../../../assets/images/game/myMonkey/tab.png");
      background-size: 100% 100%;
      width: 256px;
      height: 64px;
      margin: 0 auto;
      margin-top: -72px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      position: absolute;
      left: 800px;
      -webkit-animation: s "w" w 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s
        both;
      animation: swingTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
      @-webkit-keyframes swingTop {
        0% {
          -webkit-transform: rotateX(-100deg);
          transform: rotateX(-100deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 1;
        }
      }
      @keyframes swingTop {
        0% {
          -webkit-transform: rotateX(-100deg);
          transform: rotateX(-100deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
          -webkit-transform-origin: top;
          transform-origin: top;
          opacity: 1;
        }
      }
      span {
        margin-top: 12px;
        font-size: 30px;
        position: relative;
        cursor: pointer;
      }
      .isChose {
        -webkit-animation: focus-in-contract-bck 0.5s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: focus-in-contract-bck 0.5s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        @-webkit-keyframes focus-in-contract-bck {
          0% {
            transform: scale(1);
            opacity: 0;
          }
          100% {
            transform: scale(1.2);
            opacity: 1;
          }
        }
        @keyframes focus-in-contract-bck {
          0% {
            transform: scale(1);
            opacity: 0;
          }
          100% {
            transform: scale(1.2);
            opacity: 1;
          }
        }
      }
      .isClick {
        position: absolute;
        bottom: -10px;
        left: -10%;
        width: 120%;
        height: 6px;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0px 2px 0px 0px #000000;
        -webkit-animation: scale-up-hor-center 0.25s
          cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: scale-up-hor-center 0.25s cubic-bezier(0.39, 0.575, 0.565, 1)
          0.5s both;
        @-webkit-keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
        @keyframes scale-up-hor-center {
          0% {
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
          }
          100% {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
          }
        }
      }
    }
  }
  .btns {
    opacity: 0.5;
    position: absolute;
    top: -80px;
    z-index: 51;
    .tab {
      opacity: 0;
      width: 256px;
      height: 64px;
      margin: 0 auto;
      margin-top: -60px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
      position: absolute;
      left: 800px;
      span {
        cursor: pointer;
        margin-top: 5px;
        font-size: 30px;
      }
    }
  }
  .main {
    padding: 0 101px;
    margin-top: 256px;
    display: flex;
    .leftPath {
      .backBtn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        width: fit-content;
        .backBg {
          background-image: url("../../../assets/images/game/myMonkey/back.png");
          background-size: 100% 100%;
          width: 53px;
          height: 50px;
        }
        span {
          font-size: 30px;
          margin-left: 2px;
        }
      }
      .backBtn:hover {
        -webkit-animation: hoverBack 1s linear infinite both;
        animation: hoverBack 1s linear infinite both;
        @-webkit-keyframes hoverBack {
          0%,
          100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }
          50% {
            -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
          }
        }
        @keyframes hoverBack {
          0%,
          100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
          }
          50% {
            -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
          }
        }
      }
      .monkey {
        .picture {
          position: relative;
          height: 626px;
          width: 621px;
          margin-bottom: 34px;
          .monkeyBorder {
            background-image: url("../../../assets/images/game/myMonkey/monkeyBorder.png");
            background-size: 100% 100%;
            width: 621px;
            height: 626px;
            position: absolute;
            z-index: 10;
          }
          .monkeyBg {
            background-image: url("../../../assets/images/game/myMonkey/monkeyBg.png");
            background-size: 100% 100%;
            width: 512px;
            height: 512px;
            position: absolute;
            top: 55px;
            left: 54.5px;
            z-index: 9;
          }
          .monkeyItem {
            cursor: pointer;
            background-image: url("../../../assets/images/game/myMonkey/monkeyItem.png");
            background-size: 100% 100%;
            width: 217px;
            height: 373px;
            position: absolute;
            z-index: 11;
            left: 202px;
            top: 125px;
          }
        }
        .phone {
          display: none;
        }
        .desc {
          font-size: 30px;
          li {
            margin-bottom: 21px;
            display: flex;
            align-items: center;
            .title {
              display: block;
              width: 128px;
            }
          }
        }
      }
    }
    .rightPath {
      margin-left: 57px;
      .feed {
        width: 980px;
        .text {
          font-size: 30px;
          margin-left: 47px;
          margin-bottom: 18px;
          .title {
            margin-right: 46px;
          }
        }
        /deep/ .el-progress-bar__outer {
          background-image: url("../../../assets/images/game/myMonkey/progressBg1.png");
          background-size: 100% 100%;
          width: 980px;
          height: 87px !important;
          background-color: unset;
        }
        /deep/ .el-progress-bar__inner {
          margin-top: 10px;
          margin-left: 18px;
          background-image: linear-gradient(
            to bottom,
            #e1b800 0%,
            #e78e00 100%
          );
          margin-right: -50px;
          border-radius: 20px;
          height: 50px;
          box-shadow: #e78e00 2px 2px 10px;
          .el-progress-bar__innerText {
            display: none;
          }
        }
      }
      .attribute {
        width: 938px;
        margin-top: 21px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 21px;
        .attributeItem {
          margin-bottom: 19px;
          .text {
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 9px;
            p {
              margin-right: 36px;
            }
            .new {
              color: #00ff1e;
              margin-left: 13px;
            }
            .newAnimation {
              -webkit-animation: blink-1 0.7s 1s both;
              animation: blink-1 0.7s 1s both;
              @-webkit-keyframes blink-1 {
                0%,
                50%,
                100% {
                  opacity: 1;
                  transform: scale(1);
                }
                25%,
                75% {
                  opacity: 0;
                  transform: scale(3);
                }
              }
              @keyframes blink-1 {
                0%,
                50%,
                100% {
                  opacity: 1;
                  transform: scale(1);
                }
                25%,
                75% {
                  opacity: 0;
                  transform: scale(3);
                }
              }
            }
          }
          /deep/ .el-progress-bar__outer {
            background-image: url("../../../assets/images/game/myMonkey/progressBg2.png");
            background-size: 100% 100%;
            width: 450px;
            height: 45px !important;
            background-color: unset;
            border-radius: unset;
          }
          /deep/ .el-progress-bar__inner {
            margin-top: 0px;
            margin-left: 0px;
            border-radius: 10px;
            height: 42px;
            box-shadow: rgba(0, 0, 0, 0.7) 2px 2px 10px;
            .el-progress-bar__innerText {
              display: none;
            }
          }
        }
        .attributeItem:last-child {
          margin-right: 0;
        }
      }
      .desc {
        margin-top: 63px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0 21px;
        font-size: 30px;
        .descItem {
          margin-bottom: 45px;
          display: flex;
          justify-content: flex-start;
          // margin-right: 36px;
          width: 33.33%;
          .name {
            margin-right: 10px;
            width: 120px;
            display: block;
          }
          .value {
            margin-right: 10px;
          }
          .add {
            color: #00ff1e;
          }
        }
        .descItem:nth-child(3n) {
          margin-right: 0px;
        }
      }
      .upMonkey {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        margin-top: 35px;
        .leftPath {
          margin-right: 96px;
          display: flex;
          flex-direction: column;
          align-items: baseline;
          justify-content: space-between;
          height: 184px;
          .name {
            margin-left: 69px;
          }
          .coins {
            display: flex;
            align-items: center;
            justify-items: center;
            .coinsBg {
              background-image: url("../../../assets/images/game/myMonkey/coins.png");
              background-size: 100% 100%;
              width: 54px;
              height: 54px;
              margin-right: 15px;
            }
          }
          .diamonds {
            display: flex;
            align-items: center;
            justify-items: center;
            .diamondsBg {
              background-image: url("../../../assets/images/game/myMonkey/diamonds.png");
              background-size: 100% 100%;
              width: 54px;
              height: 54px;
              margin-right: 15px;
            }
          }
        }
        .rightPath {
          .btn {
            background: url(../../../assets/images/game/myMonkey/type1.png);
            display: flex;
            justify-content: center;
            background-size: 100% 100%;
            width: 238px;
            height: 123px;
            font-size: 48px;
            cursor: pointer;
            span {
              margin-top: 30px;
            }
          }
          .btn:hover {
            background: url(../../../assets/images/game/myMonkey/type0.png);
            background-size: 100% 100%;
          }
          .probability {
            font-size: 36px;
            margin-left: 18px;
            margin-top: 15px;
            span {
              margin-left: 5px;
              color: #ff0000;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .OperationMonkey {
    margin-top: 0;
    .operation {
      position: fixed;
      top: 126px;
      z-index: 15;
      width: 100%;
      .tab {
        width: 150px;
        height: 42px;
        padding: 2px 27px;
        left: 280px;
        margin-top: 22px;
        span {
          margin-top: 5px;
          font-size: 22px;
        }
        .isClick {
          height: 4px;
          bottom: -8px;
        }
      }
    }
    .btns {
      top: -68px;
      .tab {
        width: 150px;
        height: 42px;
        padding: 2px 27px;
        left: 280px;
        margin-top: 22px;
        span {
          margin-top: 5px;
          font-size: 22px;
        }
        .isClick {
          height: 4px;
          bottom: -8px;
        }
      }
    }
    .main {
      margin-top: 0;
      padding: 0 20px;
      flex-direction: column;
      .leftPath {
        margin-top: 30px;
        margin-bottom: 10px;
        .backBtn {
          margin-left: 45px;
          margin-bottom: 10px;
          .backBg {
            width: 35px;
            height: 33px;
          }
          span {
            font-size: 20px;
            margin-left: 2px;
          }
        }
        .monkey {
          display: flex;
          justify-content: space-between;
          .picture {
            position: relative;
            height: 417.3px;
            width: 414px;
            margin-bottom: 0;
            .monkeyBorder {
              width: 417.3px;
              height: 414px;
            }
            .monkeyBg {
              width: 341.3px;
              height: 341.3px;
              top: 36px;
              left: 36.3px;
            }
            .monkeyItem {
              width: 144.6px;
              height: 248px;
              left: 134.6px;
              top: 83.3px;
            }
          }
          .phone {
            display: block;
            margin-top: 20px;
            margin-right: 50px;
            .phoneDesc {
              font-size: 20px;
              li {
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                .title {
                  display: block;
                  width: 86px;
                }
              }
            }
            .upMonkey {
              display: flex;
              flex-direction: column;
              margin-top: 0px;
              .leftPath {
                display: flex;
                flex-direction: column;
                align-items: baseline;
                justify-content: space-between;
                margin-top: 25px;
                .name {
                  margin-left: 46px;
                }
                .coins {
                  display: flex;
                  align-items: center;
                  justify-items: center;
                  margin: 10px 0;
                  .coinsBg {
                    background-image: url("../../../assets/images/game/myMonkey/coins.png");
                    background-size: 100% 100%;
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                  }
                }
                .diamonds {
                  display: flex;
                  align-items: center;
                  justify-items: center;
                  .diamondsBg {
                    background-image: url("../../../assets/images/game/myMonkey/diamonds.png");
                    background-size: 100% 100%;
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                  }
                }
              }
              .rightPath {
                margin-left: 15px;
                margin-bottom: 20px;
                .btn {
                  background: url(../../../assets/images/game/myMonkey/type1.png);
                  display: flex;
                  justify-content: center;
                  background-size: 100% 100%;
                  width: 158.6px;
                  height: 82px;
                  font-size: 32px;
                  cursor: pointer;
                  span {
                    margin-top: 22px;
                  }
                }
                .btn:hover {
                  background: url(../../../assets/images/game/myMonkey/type0.png);
                  background-size: 100% 100%;
                }
                .probability {
                  font-size: 24px;
                  margin-left: 18px;
                  margin-top: 15px;
                  span {
                    margin-left: 5px;
                    color: #ff0000;
                  }
                }
              }
            }
          }
          .desc {
            display: none;
          }
        }
      }
      .rightPath {
        margin-left: 0;
        margin-bottom: 200px;
        .feed {
          width: 700px;
          .text {
            font-size: 20px;
            margin-left: 31.3px;
            margin-bottom: 12px;
            .title {
              margin-right: 30.6px;
            }
          }
          /deep/ .el-progress-bar__outer {
            width: 700px;
            height: 62.1px !important;
          }
          /deep/ .el-progress-bar__inner {
            margin-top: 7.6px;
            margin-left: 12px;
            height: 35px;
          }
        }
        .attribute {
          width: 670px;
          margin-top: 16px;
          padding: 0 14px;
          .attributeItem {
            margin-bottom: 14.6px;
            .text {
              font-size: 20px;
              margin-bottom: 7.3px;
              p {
                margin-right: 24px;
              }
              .new {
                margin-left: 8.6px;
              }
            }
            /deep/ .el-progress-bar__outer {
              width: 321.4px;
              height: 32.14px !important;
            }
            /deep/ .el-progress-bar__inner {
              height: 30px;
            }
          }
        }
        .desc {
          margin-top: 54.6px;
          padding: 0 14px;
          font-size: 20px;
          .descItem {
            margin-bottom: 45px;
            .name {
              margin-right: 7px;
              width: 80px;
            }
            .value {
              margin-right: 7px;
            }
          }
        }
        .upMonkey {
          display: none;
        }
      }
    }
  }
}
</style>